<template>
    <div class="bigbox">
        <div class="box1">
            <!--背景-->
            <div class="beijing"></div>
        </div>
        <div class="logo">
            <img src="../../public/img/logo.png" alt="" width="100%">
        </div>
        <div class="box2">
            <form action="" method="get">
                <div class="ding1">
                    <i class="iconfont icon-yonghu1"></i><input id="username" v-model="username" @keyup="input1($event)" class="input1" type="text" name="txt1" placeholder="请输入用户名" minlength="6" maxlength="8">
                    <p style="color:red" id="userts">{{ts1}}</p>
                </div>
                <div class="ding2">
                    <i class="iconfont icon-shoujihaoma"></i><input id="phone" v-model="phone" @keyup="input2($event)" class="input2" type="text" name="txt2" placeholder="请输入手机号码">
                    <span style="color:red;font-size:14px" id="phonets">{{ts2}}</span>
                </div>
                <!-- 输入密码 -->
                <div class="ding2">
                    <i class="iconfont icon-mima"></i><input class="input3" :type="ty1" @keyup="input3($event)" v-model="mima" name="pwd1" placeholder="请输入6位密码" maxlength="6">
                    <p style="color:red" id="pwd1ts">{{ts3}}</p>
                </div>
                <!-- 确认密码 -->
                <div class="ding2">
                    <i class="iconfont icon-mima"></i><input @keyup="input4($event)" class="input4" :type="ty2" name="pwd2" placeholder="请确认密码" maxlength="6">
                    <p style="color:red" id="pwd2ts">{{ts4}}</p>
                </div>
                <!-- 同意条款 -->
                <span style="color:red" id="gouts">{{tsCheck}}</span>
                <p><input type="checkbox" @change="check" v-model="checkbox"><span>我同意</span><a>《注册协议》</a></p>
                <input id="btn" @click="btn" class="three" type="button" value="注  册">
            </form>
        </div>
        <div class="box3">已有会员？<router-link to="/login">点击登录</router-link></div>
        <!-- 弹框提示 -->
        <div id="tsk" class="tsk" v-bind:style="{display:blockNone}">
            <p>注册成功！</p>
            <p>即将跳转登录页面</p>
        </div>
    </div>
</template>

<style lang="less" scoped>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .box1{
        position: fixed;
        left: 0;
        right:0;
        bottom: 0;
        top: 0;
        /*background: url("../../public/img/beijing8.jpg");*/
        z-index: -1;
        .beijing{
            width: 100%;
            height: 100%;
            /*z-index: 1;*/
            background-image: linear-gradient(to bottom, #fff 30%, #999);
            opacity: 0.8;
        }
    }
    .logo{
        display: flex;
        justify-content: center;
        margin-top: 40px;
        img{
            width: 60%;
        }
    }
    .box2{
        margin: 32px 32px 22px;
        input{
            padding-left: 45px;
            font-size: 15px;
            width: 100%;
            height: 46px;
            border: none;
            border-bottom: 1px solid #666;
            outline: none;
            background: transparent;
        }
        p{
            font-size:16px ;
        }
        .ding1{
            position: relative;
            i{
                position: absolute;
                left: 8px;
                top: 5px;
                font-size: 25px;
            }
        }
        .ding2{
            margin-top: 15px;
            position: relative;
            i{
                position: absolute;
                left: 8px;
                top: 4px;
                font-size: 27px;
            }

        }
        .three{
            padding: 0;
            background: #333333;
            height: 50px;
            color: #ffffff;
            margin-top: 15px;
        }
        input::placeholder{
            color: #aaa;
        }
        p{
            display: flex;
            align-items: center;
            font-size: 14px;
            span{
                padding-left: 5px;
            }
            input{
                width: 18px;
            }
            a{
                color: #007BFF;
            }
        }

    }
    .box3{
        font-size: 14px;
        width: 100%;
        height: 42px;
        text-align: center;
        line-height: 42px;
        color: #666;
        a{
            text-decoration: underline;
            color: #fff;
        }
    }
    .tsk{
        width: 170px;
        height: 76px;
        line-height: 31px;
        text-align: center;
        background: #000;
        opacity: 0.5;
        color: #c2c5c9;
        font-size: 30px;
        border-radius: 6px;
        position: fixed;
        top: 50%;
        left: 50%;
        font-size: 20px;
        transform: translate(-50%, -50%);
    }
</style>

<script>
export default {
    data(){
        return {
            username:'',//用户名
            phone:'',     //手机号
            ts1:'',//用户名提示
            ts2:'',  //手机号提示
            ts3:"",  //密码提示
            ts4:"",  //再次密码提示
            mima:"", //密码
            ty1:"password",  //密码type类型
            ty2:"password",  //确认密码type类型
            checkbox:"",
            tsCheck:"",//没勾选同意框提示文本
            blockNone:"none",//默认设置为隐藏
            arr:[false,false,false,false,false],
        }
    },
    methods:{
        //用户名判断
        input1(e){
            var reg1=/^[a-zA-Z0-9]{6,8}$/ig;
            if(e.target.value.trim()==''){//去掉左右两边的空格
                this.ts1="用户名不能为空";
                this.arr[0]=false;
            }else if(!reg1.test(e.target.value)){//如果匹配不成功
                this.ts1='用户名格式错误';
                this.arr[0]=false;
            }else{
                const obj={id:1,username:this.username};
                 this.$axios.post('http://47.111.93.194:3003/register',obj).then((data)=>{
                     if(data.status==200){
                         if(data.data.code==200){
                        //console.log(data)
                        this.ts1='';
                        this.arr[0]=true;
                    }else{
                        this.ts1=data.data.msg;
                        this.arr[0]=false;
                        }
                    }
                 }).catch(function(err){
                     console.log(err);
                 })
            }
        },
        //input2
        input2(e){
            var reg2=/^1[3-9]\d{9}$/ig;
            if(e.target.value.trim()==''){
                 this.ts2='手机号不能为空';
                 this.arr[1]=false;
            }else if(!reg2.test(e.target.value)){
                 this.ts2='用户名格式错误';
                 this.arr[1]=false;
            }else{
                const obj={id:2,phone:this.phone};
                this.$axios.post('http://47.111.93.194:3003/register',obj).then((data)=>{
                    if(data.status==200){
                        // console.log(data);
                        if(data.data.code==200){
                        this.ts2='';
                        this.arr[1]=true;
                    }else{
                        this.ts2=data.data.msg;
                        this.arr[1]=false;
                        }
                    }
                }).catch(function(err){
                    console.log(err);
                })
            }
        },
        //input3
        input3(e){
           var reg3=/^[\w]{6}$/ig;
           if(e.target.value.trim()==''){
              this.ts3='密码不能为空';
              this.arr[2]=false;
           }else if(!reg3.test(e.target.value)){
              this.ts3='密码格式错误';
              this.arr[2]=false;
           }else{
              this.ts3='';
              this.arr[2]=true;
           }
        },
        //input4
        input4(e){
            if(e.target.value.trim()==''){
                this.ts4='确认密码不能为空';
                this.arr[3]=false;
            }else if(e.target.value!=this.mima){//密码不相等
                this.ts4='两次密码不一致';
                this.arr[3]=false;
            }else{
                this.ts4='';
                this.arr[3]=true;
            }
        },
        //协议勾选
        check(){
            if(this.checkbox){
                this.tsCheck="";
                this.arr[4]=true;
            }else{
                this.tsCheck="您还未同意协议";
                this.arr[4]=false;
            }
        },
        //注册按钮
        btn(){
            if(!this.checkbox){
                this.tsCheck="您还未同意协议";
            }else{
                this.tsCheck="";//否则就不提示
            }
            this.arr.some((item,index)=>{
                if(item==false){
                    // console.log("不能跳转");
                    return true;
                }else{
                    //console.log(this.arr);
                    if(index==this.arr.length-1){//
                        //所有开关都开启
                        this.arr=[false,false,false,false,false];
                        //console.log("准备跳转");
                        //将数据传后端，加入数据库中
                        const obj={id:3,username:this.username,phone:this.phone,password:this.mima,list:[]};
                        this.$axios.post('http://47.111.93.194:3003/register',obj).then((data)=>{
                            if(data.status==200){

                            }
                        }).catch(function(err){
                            console.log(err);
                        });
                        //
                        // alert("注册成功，即将跳转登录页面")
                        this.blockNone="block";//提示框显示
                    setTimeout(()=>{
                        this.blockNone="none";//
                        this.$router.push({path:'/login'})
                    },2000)//两秒消失

                    }
                }
            })
        },
    },
    mounted(){

    }
}
</script>